<template>
  <div>
    <el-dialog title="素材库" :visible.sync="curVisible" size="large" :before-close="beforeClose">
      <gallery :openInDialog="true" :max="max" @on-select="onSelect"></gallery>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="close">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Gallery from '../views/Material/Gallery'

export default {
  name: 'ImgSelect',
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    close: {
      type: Function,
      required: true,
    },
    onSelect: {
      type: Function,
      default: () => {},
    },
    max: Number,
  },
  components: {
    Gallery,
  },
  data() {
    return {
      curVisible: this.visible,
    }
  },
  watch: {
    visible(val) {
      this.curVisible = val
    },
  },
  methods: {
    curVisible(val) {
      this.$emit('input', val)
    },
    beforeClose(done) {
      this.close()
      done()
    },
  },
}
</script>

<style>

</style>
